<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下，你就不知道</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--头部-->
<header id="header">
<!--    左边-->
    <div class="header-left">
       <span>
           <img src="images/weather.png" alt="" align="center">
       </span>
        <span class="msg-span">
            <span>|</span>
            <a href="#">换肤</a>
            <a href="#">消息</a>
        </span>
    </div>
<!--    右边-->
    <div class="header-right">
        <a href="">新闻</a>
        <a href="">hao123</a>
        <a href="">地图</a>
        <a href="">学术</a>
        <a href="https://files.catbox.moe/r0gaiv.jpg">帅哥颜锦晖</a>
        <a href="" class="more-product">更多产品</a>
    </div>
</header>

<!--搜索-->
<section id="content">
        <!--logo-->
    <div class="logo">
        <img src="images/bd_logo.png" alt="百度logo">
    </div>
    <div class="search">
        <form action="http://www.baidu.com">
            <input name="content" type="text" class="search-input">
            <input name="btn" type="submit" class="search-submit" value="颜锦晖百度下">

        </form>

    </div>
</section>

<!--列表-->
<section id="list">
<!--    头部  -->
    <div class="list-head">
        <!--左边-->
        <div class="list-head-left">
            <a href="">
                <img src="images/person_icon.png" alt="">
                <span>我的关注</span>
            </a>
            <a href="">
                <span>推荐</span>
            </a>
            <a href="">
                <span>导航</span>
            </a>
        </div>
        <!--右边-->
        <div class="list-head-right">
            <a href="#">
                <img src="images/setting_icon.png" alt="">
            </a>
        </div>
    </div>
<!--    内容-->
    <div class="list-content">
        <!--内容的左边-->
        <div class="list-content-left">
            <!--1-->
            <div class="list-content-cell1">
                <h3>今天天气真好，可是我还是单身！</h3>
                <img src="images/cell_img1.png" alt="">
                <img src="images/cell_img2.png" alt="">
                <img src="images/cell_img3.png" alt="">
                <p>颜锦晖新闻 04-12 18:58</p>
            </div>

            <!--2-->
            <div class="list-content-cell2">
                 <div class="cell-img">
                     <img src="images/cell_img1.png" alt="">
                 </div>
               <div class="cell-tittle">
                   <h3>有趣且单身 永远滴神颜锦晖</h3>
                   <p>颜锦晖新闻 04-12 18:58</p>
               </div>
            </div>

                <!--3-->
                <div class="list-content-cell2">
                    <div class="cell-img">
                        <img src="images/cell_img2.png" alt="">
                    </div>
                        <div class="cell-tittle">
                            <h3>有趣且单身 永远滴神颜锦晖</h3>
                            <p>颜锦晖新闻 04-12 18:58</p>
                        </div>
                    </div>
                </div>


        <!--内容的右边-->
        <div class="list-content-right">
            <div class="right-top">
                <h4>实施热点</h4>
                <div>
                    <img src="images/circle_icon.png" alt="">
                    <span>换一换</span>
                </div>
            </div>
            <div class="right-body">
                <ul>
                    <li>
                        <a href="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2678746250,3384299167&fm=26&gp=0.jpg">颜锦晖大帅哥</a>
                    </li>
                    <li>
                        <a href="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=834899285,3804159807&fm=26&gp=0.jpg">赵露思大美女</a>
                    </li>
                    <li>
                        <a href="">校园校草颜颜颜</a>
                    </li>
                    <li>
                        <a href="">学校十个妹妹追颜</a>
                    </li>
                    <li>
                        <a href="">高校女子称他彭于晏</a>
                    </li>
                    <li>
                        <a href="">奥力给冲冲冲</a>
                    </li>
                    <li>
                        <a href="">没有人比他更帅了</a>
                    </li>
                    <li>
                        <a href="">校园美女都称他为帅哥</a>
                    </li>
                    <li>
                        <a href="">日本决定排放一顿污水</a>
                    </li>
                    <li>
                        <a href="">美国空降陨石大肥羊</a>
                    </li>
                </ul>
            </div>
        </div>

    </div>
</section>


</body>
</html>